<template>
  <el-card class="box-card" v-loading="loading">
    <el-descriptions :title="resource.resourceNo + '--' + resource.resourceName">
      <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
      <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
      <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button @click="addNewContact('supplier',resource.supplierId)" plain type="primary">客服咨询</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-affix :offset="0" style="text-align: left;background: #ffffff">
    <div style="padding: 10px">产品介绍</div>
    <el-divider style="margin: 0"/>
  </el-affix>
  <div v-html="content" v-loading="loading"></div>


  <el-affix :z-index="99" :offset="0" :position="'bottom'" style=" text-align: left;background: #ffffff" v-loading="loading">
    <div style="text-align: left;background: #ffffff;position: absolute;bottom: 10px;width: 85%">
      <el-divider style="margin: 0"/>
      <el-row :gutter="20" style="padding: 10px">
        <el-col :span="25">
          <el-popover trigger="click" placement="top" width="80%" popper-class="sss">
            <el-calendar v-model="buyParam.buyDate" style="height: 60%">
              <template #dateCell="{ data }">
                {{ data.day.split('-').slice(1).join('-') }}{{ data.isSelected ? '✔️' : '' }}
                <div :declare-var="sellInfo = getStore(data.day)">
                  <div v-if="sellInfo != null">
                    {{ '价格：' + sellInfo.price }}
                  </div>
                </div>
              </template>
            </el-calendar>
            <template #reference>
              <el-button type="primary">选择日期</el-button>
            </template>
          </el-popover>
        </el-col>

        <el-col :span="25" v-if="buyParam.buyDate!=null">
          {{ buyParam.buyDate.format("yyyy-MM-dd") }}
        </el-col>
        <el-col :span="25">
          <el-input-number v-model="buyParam.buyNum"/>
        </el-col>

        <el-col :span="25">
          价格:{{ selectedDateSellInfo != null ? buyParam.price * buyParam.buyNum : '--' }}
        </el-col>

        <el-col :span="25">
          <el-button type="primary" :disabled="selectedDateSellInfo==null" @click="buy">购买</el-button>
        </el-col>

      </el-row>
    </div>
  </el-affix>

</template>
<script>
export default {name:"ResourceDetail"}
</script>
<script setup>
import {computed,  onBeforeMount, ref, watch} from "vue";
import {useRoute} from "vue-router";
import axios from "~/config/axios.js";
import {cityToStr, addNewContact, showSuccessAndReload} from "~/config/utils.js";

const resource = ref({})
const resourceId = useRoute().params.id
const content = ref({})
const storePriceDateList = ref([])
const buyParam = ref({
  buyDate: undefined,
  price: undefined,
  buyNum: 1
})
const loading = ref(true)

const getStore = (date) => {
  for (let i = 0; i < storePriceDateList.value.length; i++) {
    if (date == storePriceDateList.value[i].date) {
      return storePriceDateList.value[i];
    }
  }
  return null;
}


onBeforeMount(async () => {
  resource.value = await axios.get(`/resource/${resourceId}`)
  content.value = await axios.get(`/introduce/${resource.value.introduceId}`);
  storePriceDateList.value = await axios.get(`/store/${resource.value.productType}/${resource.value.resourceId}`)
  loading.value = false
  buyParam.value.buyDate = new Date();
  buyParam.value.price = getStore(new Date().format("yyyy-MM-dd"))?.price
})

watch(() => buyParam.value.buyDate, (before, after) => {
  const i = getStore(buyParam.value.buyDate?.format("yyyy-MM-dd"))
  buyParam.value.price = i?.price
})
const selectedDateSellInfo = computed(() => {
  return getStore(buyParam.value.buyDate?.format("yyyy-MM-dd"))
})


const buy = async () => {
  const tempBuyParam = {...buyParam.value};
  tempBuyParam.buyDate = tempBuyParam.buyDate.format("yyyy-MM-dd")
  const result = await axios.post(`/resource/${resource.value.resourceId}/${resource.value.updateTime}/buy`
      , tempBuyParam);
  showSuccessAndReload()
}

</script>

<style>
.el-affix--fixed {
  background: #ffffff;
  width: 100%;

}

.sss {
  height: 80%;
  overflow-y: auto;
}

.el-col-25 {
  width: 20%;
  text-align: center;
}
</style>